<template>
    <el-dialog
      v-model="dialogVisible"
      :destroy-on-close="true"
      :align-center="true"
      width="50%"
      title="评价"
      style="padding: 20px"
    >
      <el-form
        ref="jobFormRef"
        :rules="rules"
        :model="dialogData.itemInfo"
        label-width="120px"
        label-suffix=" :"
      >
            <el-form-item label="评分">
              <el-rate v-model="dialogData.itemInfo.score" />
            </el-form-item>
            <el-form-item label="评价内容">
              <el-input maxlength="50" show-word-limit :rows="4" type="textarea" v-model="dialogData.itemInfo.content" placeholder="评价内容"></el-input>
            </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" :loading="btnLoading" @click="commentJob">快速评价</el-button>
      </template>
    </el-dialog>
  </template>
  <script setup lang="ts">
  import { ref, reactive } from "vue";
  import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
  import { DialogParam } from "@/biz/interface/DialogType";
  import { FlexJobCommentVo } from "@/biz/interface/FlexjobType";
  import { jobpuberCommentApi } from "@/api/modules/cpyjob/flexjob";
  import { ElMessage, FormInstance } from "element-plus";

  //页面的数据
  interface flexjobAbnormalDialogOption extends DialogParam {
    //弹出表单的标题
    title: string;
    //当前的数据对象
    itemInfo: FlexJobCommentVo;
    //其它的数据都继续在这里加
  }
  //提交按钮，避免多次提交
  const btnLoading = ref(false);
  //弹出框的参数
  const dialogVisible = ref(false);
  //当前表单数据在这里初始化
  const dialogData = reactive<flexjobAbnormalDialogOption>({
    optType: OptEnum.UNKNOW,
    title: "",
    itemInfo: {}
  });
  
  // 接收父组件传过来的参数
  const acceptParams = (params: DialogParam): void => {
    dialogData.optType = params.optType;
    dialogData.rowData = params.rowData;
    dialogData.title = getOptTitle(dialogData.optType);
  
    initItemInfo();
    if (dialogData.rowData) {
      dialogData.itemInfo.jobId = dialogData.rowData.jobId;
    }
  
    dialogVisible.value = true;
  };
  
  //初始化页面的数据
  const initItemInfo = (): void => {
    dialogData.itemInfo = { score:5 };
  };
  
  //数据较验
  const rules = reactive({
    billNo: [{ required: true, message: "请填写公司税号", trigger: "blur" }]
  });
  
  const jobFormRef = ref<FormInstance>();
  // 回复报价人的报价
  const commentJob = ()=>{
    btnLoading.value = true;
    jobFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }

    // console.log("要提交的数据", dialogData.itemInfo)
    try {
      if (dialogData.itemInfo.jobId) {
        //提交数据
        // console.log("提交的数据", dialogData.itemInfo, dynamicTags.value);
        let res = await jobpuberCommentApi({
          jobId: dialogData.itemInfo.jobId,
          score: dialogData.itemInfo.score,
          content: dialogData.itemInfo.content
        });
        if (res.data) {
          ElMessage.success({ message: `评价成功！` });
          //刷新列表数据
          emits("refresh-list");
          dialogVisible.value = false;
        }
        // else{
        //   ElMessage.error({ message: res.message });
        // }
      }
    } catch (error) {
      console.log("出现异常情况,", error);
      // ElMessage.error({ message: error?.message });
    } finally {
      btnLoading.value = false;
    }
  });
  };

  //页面事件
  const emits = defineEmits(["refresh-list"]);


  //页面参数
  defineExpose({
    acceptParams
  });
  </script>
  <style scoped lang="scss"></style>
  